<!--TODO: 用户管理自己需求的页面 -->
<template>

    <div class="table-container">
        <el-table ref="goodsTable"
                  :data="requestsList"
                  style="width: 100%"
                  @selection-change=""
                  v-loading="listLoading"
        >
            <el-table-column label="需求id"  align="center" min-width="8%">
                <template slot-scope="scope">
                    <p>{{scope.row.requestId}}</p>
                </template>
            </el-table-column>
            <el-table-column label="名称" align="center" min-width="15%">
                <template slot-scope="scope">
                    {{scope.row.requestName}}
                </template>
            </el-table-column>
            <el-table-column label="类型"  align="center" min-width="10%">
                <template slot-scope="scope">
                    {{scope.row.typeId}}
                </template>
            </el-table-column>
            <el-table-column label="价格" align="center" min-width="10%">
                <template slot-scope="scope">
                    {{scope.row.price}}
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center" min-width="30%">
                <template slot-scope="scope">
                    {{scope.row.description}}
                </template>
            </el-table-column>
            <el-table-column label="已收" align="center" min-width="10%">
                <template slot-scope="scope">
                    {{scope.row.isSupplied?"是":"否"}}
                </template>
            </el-table-column>
            <el-table-column label="操作"  align="center" min-width="10%">
                <template slot-scope="scope">
                    <el-tooltip :enterable = false class="item" effect="light" content="编辑" placement="top">
                        <el-button
                            size="mini"
                            icon = "el-icon-edit-outline"
                            @click="handleUpdateRequest(scope.$index, scope.row)"
                            circle>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip :enterable = false class="item" effect="light" content="删除" placement="top">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            icon = "el-icon-delete"
                            circle>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <div class="batch-operate-container">
            <el-button @click="dialogVisible = true" icon="el-icon-plus" type="primary"
                       size="small" style="margin-left: 20px">新建需求</el-button>
        </div>

        <el-dialog title="新建需求" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.requestName"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.requestType" placeholder="商品类型">
                        <el-option label="电子产品" value=1></el-option>
                        <el-option label="生活用品" value=2></el-option>
                        <el-option label="学习用品" value=3></el-option>
                        <el-option label="交通工具" value=4></el-option>
                        <el-option label="游戏交易" value=5></el-option>
                        <el-option label="有偿跑腿" value=6></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitCancel">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改需求" :visible.sync="dialogVisible2" width="30%">
            <el-form ref="form" :model="form2" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form2.requestName"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form2.requestType" placeholder="商品类型">
                        <el-option label="电子产品" value=1></el-option>
                        <el-option label="生活用品" value=2></el-option>
                        <el-option label="学习用品" value=3></el-option>
                        <el-option label="交通工具" value=4></el-option>
                        <el-option label="游戏交易" value=5></el-option>
                        <el-option label="有偿跑腿" value=6></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form2.price"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="form2.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitCancel2">取 消</el-button>
                <el-button type="primary" @click="onSubmit2">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import {addRequest, getRequestList, getUserStudentByUsername, modifyRequest, modifyStudent} from "../../../api/student";

export default {
    name: "RequestManage",
    data(){
        return {
            username: localStorage.getItem('username'),
            requestsList: [],
            personalInfo: [],
            listLoading: null,
            dialogVisible: false,
            dialogVisible2: false,
            form: {
                requestName: '',
                requestType: '',
                price: '',
                description: ''
            },
            form2: {
                requestId: '',
                requestName: '',
                requestType: '',
                price: '',
                description: ''
            }
        };
    },
    created() {
        this.listLoading = 1;
        getUserStudentByUsername(this.username).then(res => {
            this.personalInfo = res.data.list;
        })
        getRequestList().then(res => {
            this.listLoading = false;
            this.requestsList = res.data.list;
        })
    },
    methods: {
        handleUpdateRequest(index,row){
            this.operateTypeDialog = 'modify';
            console.log(index);
            console.log(row);
            console.log(row.goodName+row.goodId);
            this.form2.requestId = row.requestId;
            this.form2.requestName = row.requestName;
            this.form2.requestType = row.requestType;
            this.form2.price = row.price;
            this.form2.description = row.description;
            this.dialogVisible2 = true;
        },
        handleDelete(index,row){
            this.$confirm('是否要进行删除操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = [];
                ids.push(row.id);
                this.updateDeleteStatus(1,ids);
            });
        },

        onSubmit() {
            this.dialogVisible = false
            console.log('submit!');
            console.log(this.form);
            addRequest(
                this.personalInfo[0].studentId,
                this.form.requestName,
                this.form.requestType,
                this.form.price,
                this.form.description
            ).then(res0 =>{
                    getRequestList().then(res => {
                        this.requestsList = res.data.list;
                    })
                    this.$forceUpdate();
                    this.$message({
                        message: '新建请求成功',
                        type: 'success',
                        center: true
                    });
                }
            )
        },
        submitCancel(){
            this.dialogVisible = false,
            this.form.requestName,
            this.form.requestType,
            this.form.price,
            this.form.description
        },
        onSubmit2() {
            this.dialogVisible2 = false
            console.log('submit!');
            console.log(this.form2);
            console.log(this.form2.requestId);
            modifyRequest(
                this.form2.requestId,
                this.form2.requestName,
                this.form2.requestType,
                this.form2.price,
                this.form2.description
            ).then(res0 =>{
                    getRequestList().then(res => {
                        this.requestsList = res.data.list;
                    })
                    this.$forceUpdate();
                    this.$message({
                        message: '新建请求成功',
                        type: 'success',
                        center: true
                    });
                }
            )
        },
        submitCancel2(){
            this.dialogVisible2 = false,
                this.form2.requestName,
                this.form2.requestType,
                this.form2.price,
                this.form2.description
        }
    }
}
</script>

<style scoped>

</style>
